<template>
    <div class="backPublicPage" >
        <div class="backPublic-content">
            <div class="logo">
                <img src="../../../images/logo.png" alt="">
            </div>
            
            <div class="routerView">
                <router-view></router-view>
            </div>

            <div class="inputDiv"> 
               <!-- <router-link to="/backIndex"><input class="active" type="button" value="跳过"></router-link> -->
               <!-- <input class="" type="button" value="标准运动任务"> -->
            </div>
            
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return {
           clientHeight:"",
        }
    },
    mounted(){
        // 获取浏览器可视区域高度
        this.clientHeight =   `${document.documentElement.clientHeight}`          //document.body.clientWidth;
        window.onresize = function temp() {
            this.clientHeight = `${document.documentElement.clientHeight}`;
        };
    },
    methods:{
        changeFixed(clientHeight){                        //动态修改样式
            // this.$refs.backIndexContainer.style.height = (clientHeight-70)+'px';
        },
    },
    watch:{
        clientHeight: function () {
            this.changeFixed(this.clientHeight)
        },
    }
}
</script>

<style lang="scss" scoped>
.backPublicPage{
    position: relative;
    width: 100%;
    height: 100%;
    margin:0;
    padding:0;
    overflow: hidden;
    .backPublic-content{
        position: relative;
        width:80%;
        height:100%;
        margin:auto;
        text-align: center;
        .logo{
            width:20%;
            height: 13%;
            margin: auto;
            img{
                width:100%;
                height: 100%;
            }
        }
        .routerView{
            height: 82%;
            // overflow-y: hidden;
        }
        .inputDiv{
            text-align: right;
            input{
                width: 150px;
                height:40px;
                font-size: 16px;
                font-weight: bold;
                margin-left: 20px;
                color: #76383B;
                border: 2px solid #76383B;
                background: transparent;
                border-radius: 20px;
                text-indent: 0em;
                &.active{
                    font-weight: normal;
                    color: #fff;
                    background: #76383B;
                }
            }
        }
    }
}
</style>